<template>
  <div>
    <el-row class="tac" style="min-height:600px">
      <el-col :span="5">
        <a-tree
          checkable
          v-model="checkedKeys"
          :tree-data="treeData"
          @expand="onExpand"
          @check="onCheck"
          @select="onSelect"
          :autoExpandParent="true"
        />
      </el-col>
      <el-col :span="19">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <img
              src="https://zht-admin-test.huiqulx.com/subapp/business_analysis-admin/2b2d5d900b3f14df583cfbf5b4f48b7d.png"
              alt="push"
              style="width: 20px; height: 20px; margin-top: -8px;"
            />
            <span
              style="font-size: 18px; padding-left: 10px; font-weight: bold;"
              >按钮权限</span
            >
            <span style="float: right;">
              <a
                v-if="checkednode.typeid === 4"
                class="margin-a"
                href="javascript:;"
                style="margin-right: 5px;"
                @click="addMenuButton()"
                >添加</a
              ></span
            >
          </div>

          <el-table :data="tableData" style="width: 100%">
            <el-table-column label="按钮编码" prop="actionCode">
            </el-table-column>
            <el-table-column label="按钮名称" prop="actionName">
            </el-table-column>
            <el-table-column align="right" label="操作">
              <template slot-scope="scope">
                <a
                  class="margin-a"
                  href="javascript:;"
                  style="margin-right: 5px;"
                  @click="delMenuButton(scope.row)"
                  >删除</a
                >
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col></el-row
    >
    <div class="footer">
      <a-button type="primary" @click="confirm()" style="margin-right: 10px;"
        >确定</a-button
      >
      <a-button @click="close()">关闭</a-button>
    </div>
    <zhlDialog
      title="菜单按钮"
      ref="roleMenuActiondialog"
      width="300px"
      class="my-dialog"
    >
      <div class="menuButton">
        <a-tag
          v-for="item in menuActionDatalist"
          v-bind:key="item.actionCode"
          :color="selectedActionList.indexOf(item.fid) < 0 ? 'blue' : '#108ee9'"
          @click="clickActionItem(item.fid)"
        >
          {{ item.actionName }}
        </a-tag>
      </div>
      <div class="footer">
        <a-button
          type="primary"
          @click="submitActionRole()"
          style="margin-right: 10px;"
          >确定</a-button
        >
        <a-button @click="$refs.roleMenuActiondialog.visible = false"
          >关闭</a-button
        >
      </div>
    </zhlDialog>
  </div>
</template>
<script>
import { LoadRoleMenuPower, SavePower } from '@/api/tappRole'
import {
  queryByRoleMenuId,
  delActionRole,
  getActionByMenuId,
  saveActionRole
} from '@/api/menuAction'

export default {
  props: ['roleID'],
  data() {
    return {
      treeData: [],
      checkedKeys: [],
      parentcheckedKeys: [],
      checkednode: {},
      tableData: [],
      menuActionDatalist: [],
      selectedActionList: []
    }
  },
  watch: {
    checkedKeys(val) {
      console.log('onCheck', val)
    }
  },
  methods: {
    onExpand(expandedKeys) {
      console.log('onExpand', expandedKeys)
    },
    onCheck(checkedKeys, info) {
      this.checkedKeys = checkedKeys
      if (info.halfCheckedKeys !== undefined) {
        for (let i = 0; i < info.halfCheckedKeys.length; i++) {
          if (this.parentcheckedKeys.indexOf(info.halfCheckedKeys[i]) < 0) {
            this.parentcheckedKeys.push(info.halfCheckedKeys[i])
          }
        }
      }
    },
    addMenuButton() {
      getActionByMenuId(this.checkednode.fid).then(res => {
        this.menuActionDatalist = res.data
      })
      this.$refs.roleMenuActiondialog.visible = true
    },
    clickActionItem(actionId) {
      if (this.selectedActionList.indexOf(actionId) < 0) {
        this.selectedActionList.push(actionId)
      } else {
        this.selectedActionList.splice(
          this.selectedActionList.indexOf(actionId),
          1
        )
      }
    },
    delMenuButton(rowdata) {
      const param = {
        id: rowdata.fid
      }
      delActionRole(param).then(res => {
        console.log(res)
        this.$message.success('删除成功！')
        this.loadRoleMenuButton()
      })
    },
    onSelect(selectedKeys, info) {
      if (info.node.dataRef.code !== this.checkednode.code) {
        this.checkednode = info.node.dataRef
        this.loadRoleMenuButton()
      } else {
        this.tableData = []
      }
    },
    submitActionRole() {
      const param = {
        roleId: this.roleID,
        actionList: this.selectedActionList
      }
      saveActionRole(param).then(res => {
        console.log(res)
        this.loadRoleMenuButton()
        this.$message.success('操作成功!')
      })
    },
    loadRoleMenuButton() {
      if (this.checkednode.typeid === 4) {
        queryByRoleMenuId(this.roleID, this.checkednode.fid).then(res => {
          this.tableData = res.data
          for (let i = 0; i < res.data.length; i++) {
            const item = res.data[i]
            if (this.selectedActionList.indexOf(item.actionId) < 0) {
              this.selectedActionList.push(item.actionId)
            }
          }
        })
      }
    },
    LoadData() {
      LoadRoleMenuPower(this.roleID).then(res => {
        this.checkedKeys = res.data.powermenu
        this.treeData = res.data.menulist
      })
    },
    confirm() {
      const checkedKeylist = this.checkedKeys
      for (let i = 0; i < this.parentcheckedKeys.length; i++) {
        checkedKeylist.push(this.parentcheckedKeys[i])
      }
      const param = {
        PowerParam: JSON.stringify(this.checkedKeys),
        RoleFID: this.roleID
      }
      SavePower(param).then(res => {
        this.$message.success('保存成功！')
        this.$emit('confirm', res)
      })
    },
    close() {
      this.$emit('close')
    }
  },
  mounted() {
    this.LoadData()
  }
}
</script>
<style lang="less">
.footer {
  margin-bottom: 10px;
  height: 50px;
  margin-top: -50px;
  float: right;
}
.menuButton {
  height: 200px;
}
.menuButton span {
  margin: 5px;
}
</style>
